<template>
    <div class="van_cell">
        <div class="van_cell_title">{{ data.options.label }}</div>
        <div>
            <van-password-input
                :value="data.options.defaultValue"
                :focused="showKeyboard"
                :length="data.options.length"
                :mask="data.options.mask"
                info="密码为 6 位数字"
                @focus="showKeyboard = true"
            />
            <van-number-keyboard
                :show="showKeyboard"
                @input="onInput"
                @delete="onDelete"
                @blur="showKeyboard = false"
            />
        </div>
    </div>
</template>
<script>
import { PasswordInput, NumberKeyboard } from 'vant'
export default {
    name: 'FormPassword',
    components: {
        [PasswordInput.name]: PasswordInput,
        [NumberKeyboard.name]: NumberKeyboard
    },
    props: {
        data: {
            type: Object
        }
    },
    data() {
        return {
            showKeyboard: false
        }
    },
    methods: {
        onInput(key) {
            this.data.options.defaultValue = (this.data.options.defaultValue + key).slice(0, 6)
        },
        onDelete() {
            this.data.options.defaultValue = this.data.options.defaultValue.slice(0, this.data.options.defaultValue.length - 1)
        }
    }
}
</script>
